<script setup>
import DlgAllocRoles from './DlgAllocRoles.vue';
import { timeFormatter } from '@/utils/timeHandlers';
import { enableUser,forbidUser } from '@/api/users';
import { queriedResult,queryCondition,queryUsers } from '@/composables/useUsers'
queryUsers()
//切换用户状态
const handleChange = async (act,userId) => {
    let actions = {
       ENABLE:{ msg: "启用", fn:enableUser},
       DISABLE:{ msg: "禁用", fn:forbidUser},
    }
   const {data} =  await actions[act].fn(userId)
   if(data.code === '000000'){
    ElMessage.success(`${actions[act].msg}成功`)
   } else {
    ElMessage.error(`${actions[act].msg}失败`)
    throw new Error(`${actions[act].msg}失败`)
   }
    
}
//时间选取七的时间范围
const timeRange = ref("")
//当时间范围变化时，改动相应的时间查询条件
watch(timeRange,(newTime) => {
    //如果newTime是数组
    if(Array.isArray(newTime)){
    queryCondition.value.startCreateTime = newTime[0].toISOString()
    queryCondition.value.endCreateTime = newTime[1].toISOString()
   } else {
        queryCondition.value.startCreateTime = '',
        queryCondition.value.endCreateTime =''
   }
})

const dlgAllocRoles = ref(null);
</script>

<template>
<el-card >
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="queryCondition" class="demo-form-inline">
    <el-form-item label="手机号">
      <el-input v-model="queryCondition.phone" placeholder="请输入用户手机号" clearable />
    </el-form-item>

    <el-form-item label="注册时间">
   <el-date-picker
      v-model="timeRange"
      type="datetimerange"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
     
    />
</el-form-item>


   
    <el-form-item>
      <el-button type="primary" @click="queryUsers({currentPage:1})">查询</el-button>
    </el-form-item>
  </el-form>
      </div>
</template>
    <el-table :data="queriedResult.records" border style="width: 100%">
    <el-table-column prop="id" label="用户ID" width="180" align="center" />
    <el-table-column  label="头像" width="180" align="center"  v-slot="{row}">
        <el-avatar :size="50" :src="row.portrait"  />
    </el-table-column>
    <el-table-column prop="name" label="用户名" width="180"  align="center" />
    <el-table-column prop="phone" label="手机号" width="180"  align="center" />
    <el-table-column prop="createTime" label="注册时间" width="180" align="center" :formatter="timeFormatter" />
    <el-table-column prop="status" label="状态" width="180"  align="center"  v-slot="{row}">
    <el-switch
     v-model="row.status"
    class="mb-2"
    active-value="ENABLE"
    inactive-value="DISABLE"
    active-text="启用"
    inactive-text="禁用"
    @change="handleChange($event,row.id)"
   

    />
    </el-table-column>  
    <el-table-column  label="操作" width="180"  align="center" v-slot="{row}">

        <el-button type="default" @click="dlgAllocRoles.initAndShow(row.id)">分配角色</el-button>
    </el-table-column>
    <el-table-column prop="address" label="Address" />
</el-table>
   
<el-pagination
      v-model:current-page="queriedResult.current"
      v-model:page-size="queriedResult.size"
      :page-sizes="[5,10,20,30]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queriedResult.total || 0"
      @size-change="(pageSize) => queryUsers({ pageSize, currentPage:1})"
      @current-change="(currentPage)=> queryUsers({ currentPage})"
     
    />
    <DlgAllocRoles ref="dlgAllocRoles"/>
  </el-card>
</template>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size:14px;
}
.item{
    margin-bottom: 18px;
}
.box-card{
    width:auto;
}
.el-pagination{
  display: flex;
  justify-content: center;
  margin-top: 19px;
}
</style>
